<template>
  <view class="bg-f8">
    <view class="bg-white">
      <view class="inputOne">
        <view class="input-label">原手机号码：</view>
        <u--input
          placeholder="请输入手机号"
          border="bottom"
          clearable
          color="#999"
          placeholderStyle="color: #999"
          v-model="username"
        >
        </u--input>
      </view>
      <view class="inputOne">
        <view class="input-label">验证码：</view>
        <u-input
          placeholder="请输入验证码"
          border="none"
          clearable
          color="#999"
          placeholderStyle="color:#999"
          v-model="verify"
        >
          <template slot="suffix">
            <u-code
              :seconds="seconds"
              ref="uCode"
              @change="codeChange"
            ></u-code>
            <u--text
              :text="tips"
              type="primary"
              @tap="getCode"
              class="u-border-left pl-4"
            ></u--text>
          </template>
        </u-input>
      </view>
    </view>
    <view class="btn">
      <u-button class="next-btn" text="下一步" type="primary"></u-button>
    </view>
    <view class="purse-password-explain">
      <view class="title">钱包密码设置规则?</view>
      <view class="explain-items">1、钱包密码不可以和登录密码一致。</view>
      <view class="explain-items">2、一个手机号码只可以绑定一个账户。</view>
      <view class="explain-items">3、钱包密码修改后，钱包余额不变。</view>
      <view class="explain-items">4、钱包密码只支持字母和数字组合。</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      verify: "",
      tips: "",
      seconds: 60,
    };
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.hideLoading();
        uni.$u.toast("倒计时结束后再发送");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bg-f8 {
  height: 100vh;
  overflow: auto;
  background: #f8f8f8;
  .bg-white {
    background: #fff;
    padding: 20rpx;
    margin-top: 20rpx;
    border-top: 2rpx solid #eee;
    border-bottom: 2rpx solid #eee;
    .inputOne {
      display: flex;
      align-items: center;
      padding: 16rpx 10rpx;
      .input-label {
        font-size: 30rpx;
        color: #333;
      }
      ::v-deep .u-input {
        border: none;
      }
    }
  }
  .btn {
    margin: 30rpx 20rpx;
    .next-btn {
      border-radius: 50rpx;
    }
  }
  .purse-password-explain {
    padding-left: 24rpx;
    .title {
      font-size: 28rpx;
      color: #333;
    }
    .explain-items {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
}
</style>
